<template>
  <div class="right-submit-area">
    <el-table
      :data="roleData"
      ref="roleTable"
      highlight-current-row
      size="medium"
      class="scroll-area"
      header-cell-class-name="headerCellClassName"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
    >
      <el-table-column v-if="canSet" type="selection" width="55">
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="200">
      </el-table-column>
      <el-table-column prop="description" label="用户描述"> </el-table-column>
    </el-table>
    <div class="btn" v-if="canSet">
      <el-button style="width: 140px" type="primary" @click="submitRole"
        >保存</el-button
      >
      <el-button style="width: 140px" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script>
import { list } from '@/api/system/role';
export default {
  name: 'RoleList',
  props: {
    canSet: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      roleData: [],
      multipleSelection: [],
    };
  },
  created() {
    this.getRoleList();
  },
  computed: {},
  methods: {
    setSelect(arr) {
      this.$refs.roleTable.clearSelection();
      arr.forEach((item) => {
        for (let i = 0; i < this.roleData.length; i++) {
          if (this.roleData[i].roleId === item) {
            this.$refs.roleTable.toggleRowSelection(this.roleData[i], true);
            break;
          }
        }
      });
    },
    submitRole() {
      let ids = this.multipleSelection.map((item) => item.roleId);
      this.$emit('role-submit', ids);
    },
    reset() {
      this.$emit('role-reset');
    },
    handleRowClick(row) {
      this.$emit('role-select', row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getRoleList() {
      list().then((res) => {
        this.roleData = res.rows;
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import '~@/styles/mixin.scss';
.right-submit-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  .scroll-area {
    flex: 1;
    @include noScrollBar();
  }
  .btn {
    margin-top: 10px;
    text-align: right;
  }
}
::v-deep .headerCellClassName:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
::v-deep .headerCellClassName {
  background-color: #f7f7f7 !important;
}
::v-deep .headerCellClassName:nth-last-child(2) {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
</style>
